<!DOCTYPE html>
<html class="ui-page-login">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link href="../../css/style.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/login.css"/>
	</head>
	<body>
		<div class="mui-content" style="padding:0 10vw 0 10vw">
			<div class="mui-row" style="height: 6vh;line-height: 6vh;">
				<div id='reg' style="font-size: 0.8em;color: #ef4870;float: right;margin-right: -5vw;">
					注册
				</div>
			</div>
			<div class="mui-row" style="margin-top:9vh;text-align: center;">
				<img width="25%" height="25%" src="../../images/logo_2X.png"/>
			</div>
		
			<div class="mui-row" style="margin-top: 15vh;border-bottom: 1px solid #EEEEEE;">
				<div class="mui-col-xs-1 mui-col-sm-1">
					<div class="mui-row" style="color:#999999;float: left;height: 6vh;line-height: 6vh;">
						<i style="float: left;font-size: 1.5em;margin-right: 1vw;" class="iconfont icon-login"></i>	
					</div>
				</div>
				<div class="mui-col-xs-9 mui-col-sm-9">
					<div class="mui-row" style="color:#999999;float: left;height: 6vh;line-height: 6vh;">
						<input id='account' type="text" class="mui-input-clear mui-input" placeholder="请填写手机号">
					</div>
				</div>				
			</div>
			<div class="mui-row" style="margin-top: 2vh;">
				<div class="mui-col-xs-1 mui-col-sm-1" style="border-bottom: 1px solid #EEEEEE;">
					<div class="mui-row" style="color:#999999;float: left;height: 6vh;line-height: 6vh;">
						<i style="float: left;font-size: 1.5em;margin-right: 1vw;" class="iconfont icon-password"></i>	
					</div>
				</div>
				<div class="mui-col-xs-9 mui-col-sm-9" style="border-bottom: 1px solid #EEEEEE;">
					<div class="mui-row" style="color:#999999;float: left;height: 6vh;line-height: 6vh;">
						<input id='password' type="password" class="mui-input-clear mui-input" placeholder="请输入密码">
					</div>
				</div>
			</div>
			<div style="margin-top: 5vh;">
				<div class="mui-row">
					<div class="mui-col-sm-6 mui-col-xs-6">
						<div class="mui-row">
							<div id='reg' style="font-size: 0.8em;color: #ef4870;float: left;">
								忘记密码？
							</div>
						</div>
					</div>
					<div class="mui-col-sm-6 mui-col-xs-6">
						<div class="mui-row">
							<div id='checkCodeLogin' style="font-size: 0.8em;color: #ef4870;float: right;">
								验证码登录
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="mui-content-padded">
				<div class="mui-row">
					<div class="mui-col-sm-1 mui-col-xs-1">
					</div>
					<div class="mui-col-sm-10 mui-col-xs-10">
						<div class="mui-row">
							<button id='login' class="mui-btn mui-btn-block mui-btn-primary">登录</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/mui.enterfocus.js"></script>
		<script src="../../js/app.js"></script>
		<script src="../../js/cache.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/resize.js" type="text/javascript" charset="utf-8"></script>
		<script>
			(function($, doc) {
				$.init({
					statusBarBackground: '#f7f7f7'
				});
				$.plusReady(function() {
					plus.screen.lockOrientation("portrait-primary");
					var mainPage = plus.webview.getWebviewById("main");
					var main_loaded_flag = false;
					let screenInfo= cache.getScreenInfo();
					let bottom;
					if(screenInfo.height == 812 & screenInfo.width == 375){
						bottom = 82;
					}else{
						bottom = 48;
					}
					if(!mainPage){
						mainPage = $.preload({
							id: 'main',
							url: 'html/main.html',
							subpages:[{
							  	url:'html/homepage/homepage.html',//子页面HTML地址，支持本地地址和网络地址
						        id:'homepage',//子页面标志
						        styles:{
						        		top:'40px',//子页面顶部位置
						        		bottom:bottom,//子页面底部位置
						      	},
							}]
						});
					}else{
						main_loaded_flag = true;
					}
					mainPage.addEventListener("loaded",function () {
						main_loaded_flag = true;
					});
					
					var toMain = function() {
						//使用定时器的原因：
						//可能执行太快，main页面loaded事件尚未触发就执行自定义事件，此时必然会失败
						var id = setInterval(function () {
							if(main_loaded_flag){
								clearInterval(id);
								$.fire(mainPage, 'show', null);
								mainPage.show("pop-in");
							}
						},20);
					};
					
					setTimeout(function() {
						//关闭启动界面
						plus.navigator.closeSplashscreen();
					}, 600);
					
					//检查 "登录状态/锁屏状态" 结束
					var loginButton = doc.getElementById('login');
					var accountBox = doc.getElementById('account');
					var passwordBox = doc.getElementById('password');
					var regButton = doc.getElementById('reg');
					var checkCodeLoginButton = doc.getElementById('checkCodeLogin');
					
					loginButton.addEventListener('tap', function(event) {
						let accountReg = /^1(\d{10})$/;
						let passwordReg = /^\w{6,18}$/;
						if(!accountReg.test(accountBox.value)){
							mui.toast('手机号码填写不正确',{duration:'long'});
							return;
						}
						if(!passwordReg.test(passwordBox.value)){
							mui.toast('密码应以字母开头，长度在6-18之间，只能包含字母、数字和下划线',{duration:'long'});
							return;
						}
						
						var loginInfo = {
							telephone: accountBox.value,
							password: passwordBox.value,
							clientID: cache.getDeviceInfo().uuid
						};
						// TODO 登录逻辑待完善
						
						app.Post(
							app.URL.LOGIN,
							loginInfo,
							function(data){
								if(data.code == 1){
//									plus.nativeUI.toast(data.msg,{duration:'short'});
									toMain();
								}else{
									//登陆成功
									toMain();
								}
							},
						)
					});
					$.enterfocus('#login-form input', function() {
						$.trigger(loginButton, 'tap');
					});
					regButton.addEventListener('tap', function(event) {
						$.openWindow({
							url: 'reg.html',
							id: 'reg',
							preload: true,
							show: {
								aniShow: 'pop-in'
							},
							styles: {
								popGesture: 'hide'
							},
							waiting: {
								autoShow: false
							}
						});
					}, false);
					checkCodeLoginButton.addEventListener('tap',function(){
						$.openWindow({
							url: 'login.html',
							id: 'login',
							preload: true,
							show: {
								aniShow: 'pop-in'
							},
							styles: {
								popGesture: 'hide'
							},
							waiting: {
								autoShow: false
							}
						});
					},false)
					
					window.addEventListener('resize', function() {
						oauthArea.style.display = document.body.clientHeight > 400 ? 'block' : 'none';
					}, false);
					//
					var backButtonPress = 0;
					$.back = function(event) {
						backButtonPress++;
						if (backButtonPress > 1) {
							plus.runtime.quit();
						} else {
							plus.nativeUI.toast('再按一次退出应用');
						}
						setTimeout(function() {
							backButtonPress = 0;
						}, 2000);
						return false;
					};
				});
			}(mui, document));
			
		</script>
	</body>

</html>